<template>
  <div id="susBtnChange">
    <el-collapse v-model="activeNames2">
      <el-collapse-item title="内容" name="2">
        <submitPic :num='4'></submitPic>
      </el-collapse-item>
    </el-collapse>
    <el-collapse v-model="activeNames1">
      <el-collapse-item title="内容样式" name="1"></el-collapse-item>
      <ul class="content-list">
        <li>
          <span>按钮位置 :</span>
          <div>
            <div>
              <el-radio v-model="styles.type" label="left">左边</el-radio>
              <el-radio v-model="styles.type" label="right">右边</el-radio>
            </div>
          </div>
        </li>
        <li>
          <span style="margin-top:10px">上下偏移 :</span>
          <div>
            <edgeSetting v-model="styles.shifting" unit="px" :max="600" :init="Number(styles.shifting)"></edgeSetting>
          </div>
        </li>
      </ul>
    </el-collapse>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import upLoadImage from "../../comm/upLoadImage";
import upLoadUrl from "../../comm/uploadUrl";
import submitPic from "../../comm/submitPic";
import edgeSetting from "../../comm/edgeSetting";
export default {
  name: "susBtnChange",
  data() {
    return {
      activeNames1: "1",
      activeNames2: "2",
    };
  },
  created() {
    console.log(this.styles, 999);
  },
  computed: {
    ...mapState(["susBtn", "currentId", "currentName"]),
    styles() {
      return this.susBtn[0].styles;
    },
  },
  components: {
    upLoadImage,
    upLoadUrl,
    submitPic,
    edgeSetting
  },
};
</script>

<style lang='less' scoped>
@import url("../../../assets/css/base.less");
/deep/.ivu-slider-wrap {
  margin: 12px 0 0;
}
/deep/.el-input-group__append,
.el-input-group__prepend {
  padding: 0 10px;
}
</style>
